<script setup>
import util from '@/utils/util'
import {confirm} from '@/utils/element-helper'
import {Role, User} from '@/utils/resource'

import {userManagerStore} from "@/store/userManager";
import {departmentStore} from "@/store/department";
import {reactive} from "vue";
import {appStore} from "@/store/user";

const userManagerS = userManagerStore()
const userS = appStore()
const departmentS = departmentStore()

const table = reactive({
  rows: [],
  total: 0,
  pageSize: 10,
  pageNumber: 1,
  loading: false,
})

departmentS.loadDepartments()
query()

function getDepartmentNameById(id) {
  return util.getTreeText(departmentS.departments, 'id', 'name', id, "未分配")
}

function handleSizeChange(val) {
  query(val)
}

function handleCurrentChange(val) {
  query(undefined, val)
}

async function query(pageSize, pageNumber) {
  if (pageSize) {
    table.pageSize = pageSize
  }
  if (pageNumber) {
    table.pageNumber = pageNumber
  }
  userManagerS.updateDepartmentId();
  await User.search(table, {
    sc: [
      {
        "condition": "and",
        "comparator": "like",
        "field": "name,phone,email",
        "value": userManagerS.queryParams.name
      },
      {
        "condition": "and",
        "comparator": "eq",
        "field": "departmentId",
        "value": userManagerS.queryParams.departmentId
      },
      {
        "condition": "by",
        "comparator": "order by",
        "field": 'created',
        "value": "asc"
      }
    ],
  })
}

function handleDelete(index, row) {
  confirm({}, () => User.del(row.id), (resp) => query())
}

function isShow(row) {
  // if (row.roleId === -1 && userS.user.id === row.id) {
  //   return false
  // }
  return true
}

function isRoleShow(row) {
  if (userS.user.roleId === -1) {
    return true
  }
  return false
}
</script>

<template>
  <el-row>
    <el-form :inline="true" :model="userManagerS.queryParams">
      <el-form-item label="">
        <el-input v-model="userManagerS.queryParams.name" placeholder="账号/邮箱/手机号"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="departmentId" class="my-queryParams-item">
        <el-cascader :options="departmentS.departments"
                     change-on-select clearable
                     :props="{
                        value: 'id',
                        label: 'name',
                        children: 'children'
                     }" v-model="userManagerS.queryParams.departmentIds"></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="query(undefined,undefined)" plain>查询</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <router-link to="/user/new" v-show="userS.user.roleId===-1">
          <el-button type="success" icon="CirclePlus" plain>新增</el-button>
        </router-link>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-table v-loading="table.loading"
              :data="table.rows"
              border
              stripe
              style="width: 100%">
      <el-table-column
          prop="name"
          label="账号"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="nick"
          label="姓名"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          align="center"
          width="220">
      </el-table-column>
      <el-table-column
          prop="departmentId"
          label="部门"
          align="center"
          width="150">
        <template #default="scope">
          <el-tag>{{ getDepartmentNameById(scope.row.departmentId) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          align="center"
          label="状态"
          width="100">
        <template #default="scope">
          {{ scope.row.status == 1 ? '正常' : '失效' }}
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          align="center"
          label="操作"
          width="300">
        <template #default="scope">
          <template v-if="isShow(scope.row)">
            <router-link :to="'/user/'+scope.row.id">
              <el-button
                  type="warning"
                  size="small" style="margin-right: 5px;">编辑
              </el-button>
            </router-link>
            <router-link :to="'/user/role/'+scope.row.name" v-if="isRoleShow(scope.row)">
              <el-button
                  type="success"
                  size="small" style="margin-right: 5px;">角色
              </el-button>
            </router-link>
            <el-button v-if="scope.row.name !=='admin'"
                type="danger"
                size="small"
                style="margin-right: 5px;"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
          <div v-else></div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="table.pageNumber"
        :page-sizes="[5, 10, 20, 30, 50]"
        :page-size="table.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="table.total">
    </el-pagination>
  </el-row>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
